<template>
  <div class="login-container">
    <!-- 背景图片 -->
    <div class="background-image">
      <img src="../assets/img.png" alt="香水图片" />
    </div>
    <div class="login">
      <div class="login-text-container">
    <span class="login-text">登录</span>
  </div>
      <van-form @submit="login">
        <van-field v-model="phone" placeholder="手机号码">
          <!-- 使用 label 插槽 -->
          <template #label>
            <!-- 这里可以使用图片 -->
            <img src="../assets/img_1.png" alt="手机图标" style="width: 30px; margin-right: 5px;">
            <!-- 或者使用 Vant 自带的图标 -->
            <van-icon name="phone" style="margin-right: 5px;"/>
            手机号码
          </template>
        </van-field>
      <div class="verification-code-container">
         <van-field v-model="numberCode" placeholder="数字验证码">
          <!-- 使用 label 插槽 -->
          <template #label>
            <!-- 这里可以使用图片 -->
            <img src="../assets/img_2.png" alt="验证码图标" style="width: 30px; margin-right: 5px;">
            <!-- 或者使用 Vant 自带的图标 -->
            <van-icon name="phone" style="margin-right: 5px;"/>
            手机号码
          </template>
        </van-field>
        <van-button type="danger" text="获取数字验证码" @click="sendNumberCode" />
        <van-field v-model="smsCode" placeholder="6位验证码">
          <!-- 使用 label 插槽 -->
          <template #label>
            <!-- 这里可以使用图片 -->
            <img src="../assets/img_2.png" alt="验证码图标" style="width: 30px; margin-right: 5px;">
            <!-- 或者使用 Vant 自带的图标 -->
            <van-icon name="phone" style="margin-right: 5px;"/>
            手机号码
          </template>
        </van-field>
        <van-button type="danger" text="验证数字验证码并发送短信" @click="verifyNumberCodeAndSendSms" />
      </div>
    </van-form>
    <p class="auto-register">未注册的号码登录后自动注册</p>
    <van-button type="danger" block round class="custom-login-button" @click="login">登录</van-button>
    <div class="password-login" @click="showPasswordLogin">密码登录</div>
<!--      <div class="other-login">-->
<!--        <p>或通过以下方式登录</p>-->
<!--        <div class="third-party-login">-->
<!--          <img-->
<!--            src="https://示例图标地址/alipay.png"-->
<!--            alt="支付宝图标"-->
<!--            @click="loginWithThirdParty('alipay')"-->
<!--          />-->
<!--          <img-->
<!--            src="https://示例图标地址/taobao.png"-->
<!--            alt="淘宝图标"-->
<!--            @click="loginWithThirdParty('taobao')"-->
<!--          />-->
<!--          <img-->
<!--            src="https://示例图标地址/wechat.png"-->
<!--            alt="微信图标"-->
<!--            @click="loginWithThirdParty('wechat')"-->
<!--          />-->
<!--          <img-->
<!--            src="https://示例图标地址/qq.png"-->
<!--            alt="QQ图标"-->
<!--            @click="loginWithThirdParty('qq')"-->
<!--          />-->
<!--          <img-->
<!--            src="https://示例图标地址/weibo.png"-->
<!--            alt="微博图标"-->
<!--            @click="loginWithThirdParty('weibo')"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->
      <van-checkbox-group v-model:value="agreed">
        <van-checkbox name="agree">
          我已阅读并同意
          <a href="#">《种草平台隐私政策》</a>
        </van-checkbox>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import router from '../router';
import { showToast, showSuccessToast, showFailToast } from 'vant';

// 表单数据
let phone=ref('')
let numberCode=ref('')
let smsCode=ref('')
// 获取数字验证码状态
const isSendingNumberCode = ref(false);
// 数字验证码倒计时
const numberCodeCountdown = ref(60);

// 获取数字验证码
const sendNumberCode = async () => {
  if (!phone.value) {
    showFailToast('请输入手机号');
    return;
  }
  try {
    const response = await axios.get('http://127.0.0.1:8000/user/send/', {
      params: {
        phone: phone.value
      }
    });
    showToast(response.data.code);
    console.log(response.data);
  } catch (error) {
    console.error('获取数字验证码失败:', error);
    // clearInterval(timer);
    isSendingNumberCode.value = false;
    numberCodeCountdown.value = 60;
    showFailToast('获取数字验证码失败，请重试');
  }
};

// 验证数字验证码并发送短信验证码
const verifyNumberCodeAndSendSms = async () => {
  if (!phone.value || !numberCode.value) {
    showFailToast('请输入手机号和数字验证码');
    return;
  }
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/send/', {
      phone: phone.value,
      code: numberCode.value
    });
    console.log(response.data);
    if (response.data.msg === '验证码发送成功') {
      showSuccessToast('短信验证码发送成功，请查收');
      isSendingNumberCode.value = true;
      let timer = setInterval(() => {
        if (numberCodeCountdown.value > 0) {
          numberCodeCountdown.value--;
        } else {
          clearInterval(timer);
          isSendingNumberCode.value = false;
          numberCodeCountdown.value = 60;
        }
      }, 1000);
    } else {
      showFailToast(response.data.msg);
    }
  } catch (error) {
    console.error('数字验证码或发送短信验证码失败:', error);
    showFailToast('验证数字验证码或发送短信验证码失败，请重试');
  }
};

// 登录
const login = async () => {
  if (!phone.value || !smsCode.value) {
    showFailToast('请输入手机号和短信验证码');
    return;
  }
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/login/', {
      phone: phone.value,
      code: smsCode.value
    });
    console.log(response.data);
    if (response.data.code == 200) {
      localStorage.setItem('userid', response.data.id);
      localStorage.setItem('token', response.data.token);
      localStorage.setItem('retoken', response.data.retoken);
      showSuccessToast('登录成功');
      router.push('/guanzhu');
    } else {
      showFailToast(response.data.msg);
    }
  } catch (error) {
    console.error('登录失败:', error);
    showFailToast('登录失败，请重试');
  }
};

// 显示密码登录（这里只是示例，可根据实际需求完善）
const showPasswordLogin = () => {
  alert('密码登录功能待完善');
};
</script>

<style scoped>
.login-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要设置容器的宽高，可按需添加 */
}
.login-text {
  font-size: 24px; /* 可按需调整字体大小 */
  font-weight: normal; /* 正常字体粗细，可根据喜好调整 */
  color: #333; /* 黑色文字颜色，这里是近似色，可微调 */
}
.custom-login-button {
  background-color: #ff6699; /* 粉色背景 */
  border: 8px solid #ff6699; /* 粉色边框 */
  color: white; /* 白色字体 */
  border-radius: 5px; /* 调整圆角弧度，可按需修改 */
  height: 70px; /* 按钮高度，可按需调整 */
  line-height: 44px; /* 使文字垂直居中，高度和line-height保持一致 */
  font-size: 16px; /* 字体大小，可按需调整 */
  margin-left: 20px;
}
.login-container {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 让容器至少占满视口高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景图片在登录表单下方 */
}

.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并覆盖整个容器 */
}

.login {
  position: relative;
  padding: 20px;
  //background-color: white;
  background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 70px auto; /* 垂直方向上留一定间距并水平居中 */
  max-width: 400px;
  transform: translateY(80px);
  margin-top: 80px;
  height: 550px;
}

.van-form {
  margin-bottom: 15px;
}

.verification-code {
  display: flex;
}

.verification-code .van-field {
  flex: 3;
}

.verification-code .van-button {
  flex: 1;
}

.auto-register {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
  text-align: center;
}

.van-button--danger {
  background-color: #ff6699;
  border-color: #ff6699;
}

.password-login {
  display: block;
  text-align: center;
  color: #ff6699;
  margin-top: 10px;
  text-decoration: none;
}

.other-login {
  margin-top: 20px;
}

.other-login p {
  margin-bottom: 50px;
  color: #999;
  text-align: center;
}

.third-party-login {
  display: flex;
  justify-content: center;
}

.third-party-login img {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  cursor: pointer;
}

.van-checkbox {
  font-size: 14px;
  color: #999;
  text-align: center;
}

.van-checkbox__label a {
  color: #ff6699;
}
</style>